<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <title>vim-css3-syntax</title>

    <link rel="stylesheet" href="http://hail2u.net/styles/natural.min.css">
    <style>
      .align {
        justify-self: safe;
        justify-content: true;
        justify-items: self-start;
        align-self: self-end;
        align-content: flex-start;
        align-items: flex-end;
        display: space-around;
        display: space-between;
        display: space-evenly;
      }

      .animations {
        animation: forwards;
        animation-delay: backwards;
        animation-direction: running;
        animation-duration: paused;
        animation-fill-mode: alternate-reverse;
        animation-iteration-count: auto;
        animation-name: auto;
        animation-play-state: auto;
        animation-timing-function: auto;
      }

      .background {
        background-clip: space;
        background-origin: round;
        background-size: local;
        border-image: fill;
        border-image-source: stretch;
        border-image-slice: clone;
        border-image-width: slice;
        border-image-outset: padding-box;
        border-image-repeat: border-box;
        border-radius: content-box;
        border-top-right-radius: auto;
        border-bottom-right-radius: auto;
        border-bottom-left-radius: auto;
        border-top-left-radius: auto;
        box-shadow: auto;
      }

      .box {
        overflow-style: scrollbar;
        overflow-x: panner;
        overflow-y: move;
        rotation-point: marquee;
        display: ruby;
        display: ruby-base;
        display: ruby-text;
        display: ruby-base-group;
        display: ruby-text-group;
        display: no-display;
        display: no-content;
      }

      .break {
        break-after: any;
        break-before: auto;
        break-inside: auto;
        box-decoration-break: auto;
      }

      .cascade {
        all: unset;
      }

      .colors {
        opacity: rgba(0, 0, 0, 1);
        display: hsla(0, 0, 0, 1);
        display: currentColor;
      }

      @supports (display: auto) or
        (display: auto) not
        (display: auto) {
        .conditional {
          display: auto;
        }
      }

      .compositing {
        mix-blend-mode: multiply;
        isolation: screen;
        background-blend-mode: overlay;
        display: darken;
        display: lighten;
        display: color-dodge;
        display: color-burn;
        display: hard-light;
        display: soft-light;
        display: difference;
        display: exclusion;
        display: hue;
        display: saturation;
        display: color;
        display: luminosity;
      }

      .content {
        move-to: inhibit;
        page-policy: here;
        display: first;
        display: last;
      }

      .counter-styles {
        negative: disclosure-open;
        prefix: disclosure-closed;
        suffix: simp-chinese-informal;
        range: simp-chinese-formal;
        pad: trad-chinese-informal;
        fallback: trad-chinese-formal;
        symbols: ethiopic-numeric;
        additive-symbols: symbols("*" "\2020" "\2021" "\A7");
        speak-as: auto;
      }

      .display {
        display-inside: block-level;
        display-outside: inline-level;
        display-extras: inline-list-item;
        display-box: contents;
      }

      .exclusions {
        wrap-flow: minimum;
        wrap-through: maximum;
      }

      .flexbox {
        flex-direction: flex;
        flex-wrap: inline-flex;
        flex-flow: row;
        order: row-reverse;
        flex: column-reverse;
        flex-grow: wrap;
        flex-shrink: wrap-reverse;
        flex-basis: auto;
      }

      .fonts {
        font-feature-settings: common-ligatures;
        font-kerning: no-common-ligatures;
        font-language-override: discretionary-ligatures;
        font-synthesis: no-discretionary-ligatures;
        font-variant-alternates: historical-ligatures;
        font-variant-caps: no-historical-ligatures;
        font-variant-east-asian: contextual;
        font-variant-ligatures: no-contextual;
        font-variant-numeric: stylistic(feature-value-name);
        font-variant-position: historical-forms;
        display: styleset(feature-value-name #);
        display: character-variant(feature-vlue-name #);
        display: swash(feature-value-name);
        display: ornaments(feature-value-name);
        display: annotation(feature-value-name);
        display: all-small-caps;
        display: petite-caps;
        display: all-petite-caps;
        display: unicase;
        display: titling-caps;
        display: lining-nums;
        display: oldstyle-nums;
        display: proportional-nums;
        display: tabular-nums;
        display: diagonal-fractions;
        display: stacked-fractions;
        display: ordinal;
        display: slashed-zero;
        display: jis78;
        display: jis83;
        display: jis90;
        display: jis04;
        display: simplified;
        display: traditional;
        display: proportional-width;
      }


      .gcpm::footnote-call,
      .gcpm::footnote-marker {
        string-set: string(heading, first);
        running: running(heading);
        footnote-display: element(header);
        footnote-policy: footnote;
        bookmark-label: line;
        bookmark-level: leader('.');
        bookmark-state: target-counter(attr(href url), page);
        display: target-counters(lack-of-example);
        display: target-text(attr(href url));
        display: open;
        display: closed;
      }

      .grid-layout {
        grid-template-columns: grid;
        grid-template-rows: inline-grid;
        grid-template-areas: minmax(0, 1);
        grid-template: repeat(4);
        grid-auto-columns: 0.2fr;
        grid-auto-rows: subgrid;
        grid-auto-flow: rows;
        grid-auto-position: columns;
        grid: dense;
        grid-row-start: span;
        grid-column-start: auto;
        grid-row-end: auto;
        grid-column-end: auto;
        grid-column: auto;
        grid-row: auto;
        grid-area: auto;
      }

      .hyperlinks {
        target: current;
        target-name: new;
        target-new: modal;
        target-position: window;
        display: tab;
        display: front;
        display: back;
      }

      .images {
        object-fit: contain;
        object-position: cover;
        image-resolution: snap;
        image-orientation: scale-down;
        display: from-image;
        display: image("sprite.svg#xywh=40,0,20,20");
        display: linear-gradient(to bottom, yellow, blue);
        display: radial-gradient(farthest-corner at 50% 50%, yellow, green);
        display: repeating-linear-gradient(to bottom, yellow, blue);
        display: repeating-radial-gradient(farthest-corner at 50% 50%, yellow, green);
      }

      .layout::slot(b) {
        display: same;
      }

      .line-grid {
        line-grid: create;
        line-snap: half-border;
        line-slack: rounddown(1em);
        box-snap: roundup(1em);
        display: 10gd;
      }

      .linebox {
        alignment-adjust: central;
        alignment-baseline: mathematical;
        baseline-shift: before-edge;
        dominate-baseline: after-edge;
        drop-initial-after-adjust: text-before-edge;
        drop-initial-after-align: text-after-edge;
        drop-initial-before-adjust: use-script;
        drop-initial-before-align: caps-height;
        drop-initial-size: exclude-ruby;
        drop-initial-value: include-ruby;
        inline-box-align: consider-shift;
        line-stacking: disregard-shift;
        line-stacking-ruby: inline-line-height;
        line-stacking-shift: block-line-height;
        line-stacking-strategy: max-height;
        text-height: grid-height;
        display: font-size;
        display: text-size;
        display: max-size;
      }

      .lists::marker {
        display: auto;
      }

      .marquee {
        marquee-direction: forward;
        marquee-play-count: reverse;
        marquee-speed: infinite;
        marquee-style: slide;
        display: alternate;
        display: marquee-line;
        display: marquee-block;
      }

      .masking {
        clip-path: fill-box;
        clip-rule: stroke-box;
        mask-image: view-box;
        mask-mode: nonzero;
        mask-repeat: evenodd;
        mask-position: alpha;
        mask-clip: luminance;
        mask-origin: no-clip;
        mask-size: add;
        mask-composite: subtract;
        mask: intersect;
        mask-border-source: exclude;
        mask-border-mode: auto;
        mask-border-slice: auto;
        mask-border-width: auto;
        mask-border-outset: auto;
        mask-border-repeat: auto;
        mask-border: auto;
        mask-type: auto;
      }

      .multicol {
        columns: column;
        column-count: balance;
        column-fill: avoid-column;
        column-gap: auto;
        column-rule: auto;
        column-rule-color: auto;
        column-rule-style: auto;
        column-rule-width: auto;
        column-span: auto;
        column-width: auto;
      }

      .overflow {
        max-lines: paged-x;
        display: paged-y;
        display: paged-x-controls;
        display: paged-y-controls;
        display: fragments;
      }

      .page {
        display: avoid-page;
        display: page;
        display: recto;
        display: verso;
      }

      .preslev {
        presentation-level: increment;
      }

      .regions:region {
        flow-into: element;
        flow-from: content;
        region-fragment: break;
        display: region;
        display: avoid-region;
      }

      .ruby {
        ruby-merge: ruby-text-container;
        ruby-align: inter-character;
        ruby-position: ruby-base-container;
      }

      @scope .scoping {
        div {
          display: auto;
        }
      }

      .scoping:scope-context div,
      .scoping:host,
      .scping:host(.foo),
      .scoping:host-context,
      .scoping::shadow,
      .scoping::content,
      .scoping /deep/ span {
        display: auto;
      }

      .selectors3:target,
      .selectors3:enabled,
      .selectors3:disabled,
      .selectors3:checked,
      .selectors3:indeterminate,
      .selectors3:root,
      .selectors3:empty,
      .selectors3:last-child,
      .selectors3:last-of-type,
      .selectors3:first-of-type,
      .selectors3:only-child,
      .selectors3:only-of-type,
      .selectors3:nth-child(2n+1),
      .selectors3:nth-last-child(-n+2),
      .selectors3:nth-of-type(2n+1),
      .selectors3:nth-last-of-type(n+2),
      .selectors3:not([DISABLED]) {
        display: auto;
      }

      .selectors4 | h1,
      .selectors4:scope,
      .selectors4:current,
      .selectors4:past,
      .selectors4:future,
      .selectors4:default,
      .selectors4:valid,
      .selectors4:invalid,
      .selectors4:required,
      .selectors4:optional,
      .selectors4:blank,
      .selectors4:any-link,
      .selectors4:local-link,
      .selectors4:read-only,
      .selectors4:read-write,
      .selectors4:placeholder-shown,
      .selectors4:in-range,
      .selectors4:out-of-range,
      .selectors4:user-error,
      .selectors4:active-drop-target,
      .selectors4:valid-drop-target,
      .selectors4:invalid-drop-target,
      .selectors3:matches(:hover, :focus),
      .selectors4:dir(ltr),
      .selectors4:local-link(0),
      .selectors4:current(p, li, dt, dd),
      .selectors4:nth-match(2n+1),
      .selectors4:nth-last-match(-n+2),
      .selectors4:nth-column(2n+1),
      .selectors4:nth-last-column(-n+2),
      .selectors4:column(p, li, dt, dd) {
        display: auto;
      }

      .shapes {
        shape-outside: margin-box;
        shape-image-threshold: inset(50% 50% 50% 50%);
        shape-margin: circle(100px 50px 100px);
        display: ellipse(0 0 250px 100px);
        display: polygon(0 0, 100% 100%, 0 100%);
      }

      .sizing {
        display: max-content;
        display: fit-content;
        display: fill-available;
        display: repudiate-floats;
        display: contain-floats;
      }

      .speech {
        voice-volume: 10dB;
        voice-balance: literal-punctuation;
        rest-before: no-punctuation;
        rest-after: x-weak;
        rest: weak;
        voice-rate: strong;
        voice-pitch: x-strong;
        voice-range: young;
        voice-stress: old;
        voice-duration: neutral;
        display: preserve;
        display: 10st;
        display: moderate;
        display: reduced;
      }

      .text {
        hyphens: manual;
        line-break: loose;
        overflow-wrap: strict;
        tab-size: match-parent;
        display: hanging;
        display: each-line;
        display: full-width;
      }

      .text-decor-3 {
        text-decoration-color: filled;
        text-decoration-line: dot;
        text-decoration-skip: triangle;
        text-decoration-style: sesame;
        text-emphasis: objects;
        text-emphasis-color: ink;
        text-emphasis-position: edges;
        text-emphasis-style: wavy;
        display: alphabetic;
        display: spaces;
        display: box-decoration;
        display: under;
        display: over;
      }

      .transforms {
        backface-visibility: flat;
        perspective: preserve-3d;
        perspective-origin: matrix(1);
        transform: matrix3d(1);
        transform-origin: translate(1);
        transform-style: translate3d(1);
        display: translateX(1);
        display: translateY(1);
        display: translateZ(1);
        display: scale(1);
        display: scale3d(1);
        display: scaleX(1);
        display: scaleY(1);
        display: scaleZ(1);
        display: rotate(1);
        display: rotate3d(1);
        display: rotateX(1);
        display: rotateY(1);
        display: rotateZ(1);
        display: skew(1);
        display: skewX(1);
        display: skewY(1);
        display: perspective(1);
      }

      .transitions {
        transition: linear;
        transition-property: ease;
        transition-duration: ease-in;
        transition-timing-function: ease-out;
        transition-delay: ease-in-out;
        display: step-start;
        display: step-end;
        display: steps(1, start);
        display: cubic-bezier(0.25, 0.1, 0.25, 1.0);
      }

      .ui {
        icon: active;
        resize: inactive;
        box-sizing: disabled;
        ime-mode: root;
        nav-index: horizontal;
        nav-up: vertical;
        nav-right: clip;
        nav-down: ellipsis;
        nav-left: auto;
        outline-offset: auto;
      }

      .values {
        display: 1ch;
        display: 1rem;
        display: 1vw;
        display: 1vh;
        display: 1vmin;
        display: 1turn;
        display: 1dpi;
        display: 1dpcm;
        display: 1dppx;
        display: calc(100%/3 - 2*1em - 2*1px);
        display: toggle(italic, normal);
        display: initial;
      }

      .variables {
        var-foo: var(foo);
      }

      .will-change {
        will-change: scroll-position;
      }

      .writing-modes {
        text-orientation: before;
        text-combine-horizontal: after;
        writing-mode: isolate;
        display: isolate;
        display: plaintext;
        display: mixed;
        display: upright;
        display: sideways;
        display: sideways-right;
        display: sideways-left;
        display: use-glyph-orientation;
        display: horizontal-tb;
        display: vertical-rl;
        display: vertical-lr;
      }

      .html5-elements,
      article,
      section,
      nav,
      aside,
      header,
      footer,
      figure,
      figcaption,
      main,
      data,
      time,
      mark,
      ruby,
      rb,
      rt,
      rtc,
      rp,
      bdi,
      wbr,
      embed,
      video,
      audio,
      source,
      track,
      datalist,
      keygen,
      output,
      progress,
      meter,
      template,
      canvas {
        display: auto;
      }
    </style>

    <!--[if lt IE 9]><script src="http://hail2u.net/scripts/html5shiv.min.js"></script><![endif]-->
  </head>
  <body>
    <header>
      <h1>vim-css3-syntax</h1>
    </header>
  </body>
</html>
